<template>
  <div class="echarts-inner"/>
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons')
  import { debounce } from '@/utils'
  export default {
    props: {
      autoResize: {
        type: Boolean,
        default: true
      },
      echartsData: {
        type: Object
      }
    },
    data() {
      return {
        chart: echarts
      }
    },
    mounted() {
      this.setOptions(this.echartsData)
      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
      }
      // 监听侧边栏的变化
      this.sidebarElm = document.getElementsByClassName('pageNav')[0]
      this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler)
      }
      this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
      this.chart.dispose()
      this.chart = null

    },
    methods: {
      sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.__resizeHandler()
        }
      },
      setOptions(echartsData = {}) {
        const th = this
        let dataDJSC = [
          [1,17,3,6,7,1],
          [2,14,3,5,2,4],
          [3,15,1,9,2,3],
          [4,19,2,3,9,5],
          [5,24,7,9,3,5],
          [6,23,6,6,6,5],
          [7,14,4,3,5,2],
          [8,11,4,3,1,3],
          [9,28,3,7,10,8],
          [10,25,6,9,8,2],
          [11,21,5,7,3,6],
          [12,16,7,3,0,6],
          [13,13,6,1,2,4]
        ];

        let dataBJSC = [
          [1,23,9,8,3,3],
          [2,17,3,3,9,2],
          [3,24,7,4,3,10],
          [4,25,9,5,6,5],
          [5,22,5,10,3,4],
          [6,24,4,6,8,6],
          [7,19,3,6,5,5],
          [8,21,8,1,5,7],
          [9,21,3,9,1,8],
          [10,16,5,2,3,6],
          [11,31,9,9,3,10],
          [12,12,5,3,3,1],
          [13,10,2,1,1,6]
        ];

        let dataGWB = [
          [1,11,1,0,5,5],
          [2,18,0,3,8,7],
          [3,13,0,6,7,0],
          [4,30,7,5,9,9],
          [5,19,4,7,5,3],
          [6,21,7,5,3,6],
          [7,11,6,0,5,0],
          [8,24,9,6,9,0],
          [9,31,8,7,8,8],
          [10,22,8,5,3,6],
          [11,13,4,7,1,1],
          [12,12,8,3,0,1],
          [13,21,7,7,2,5]
        ];

        let dataYXB = [
          [1,17,5,0,8,4],
          [2,24,8,8,4,4],
          [3,26,8,2,7,9],
          [4,24,2,8,4,10],
          [5,31,9,9,9,4],
          [6,19,7,1,9,2],
          [7,14,6,5,1,2],
          [8,30,7,7,6,10],
          [9,20,1,8,2,9],
          [10,11,3,3,4,1],
          [11,19,6,1,8,4],
          [12,23,7,8,7,1],
          [13,27,7,5,7,8]
        ];

        let schema = [
          {name: 'YM', index: 0, text: '年月'},
          {name: 'GZCS', index: 1, text: '故障次数'},
          {name: 'GZSB', index: 2, text: '故障设备'},
          {name: 'ZL', index: 3, text: '质量'},
          {name: 'GL', index: 4, text: '管理'},
          {name: 'CQFY', index: 5, text: '超期服役'}
        ];


        let itemStyle = {
          normal: {
            opacity: 0.8,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        };

        let option = {
          legend: {
            y: 'top',
            data: ['东郊水厂', '北郊水厂', '管网部', '营销部'],
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            x: '10%',
            x2: 150,
            y: '18%',
            y2: '10%'
          },
          tooltip: {
            padding: 10,
            borderWidth: 1,
            formatter: function (obj) {
              var value = obj.value;
              return '<div style="border-bottom: 1px solid rgba(255,255,255,.8); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + obj.seriesName + ' ' + value[0] + '：'
                + '</div>'
                + schema[1].text + '：' + value[1] + '<br>'
                + schema[2].text + '：' + value[2] + '<br>'
                + schema[3].text + '：' + value[3] + '<br>'
                + schema[4].text + '：' + value[4] + '<br>'
                + schema[5].text + '：' + value[5] + '<br>';
            }
          },
          xAxis: {
            type: 'value',
            name: '年月',
            nameGap: 16,
            nameTextStyle: {
              fontSize: 14
            },
            max: 13,
            splitLine: {
              show: false
            },
          },
          yAxis: {
            type: 'value',
            name: '故障次数',
            nameLocation: 'end',
            nameGap: 20,
            nameTextStyle: {
              fontSize: 16
            },

            splitLine: {
              show: false
            }
          },
          visualMap: [
            {
              left: 'right',
              top: '10%',
              dimension: 1,
              min: 0,
              max: 30,
              itemWidth: 30,
              itemHeight: 120,
              calculable: true,
              precision: 0.1,
              text: ['圆形大小：故障次数'],
              textGap: 30,

              inRange: {
                symbolSize: [10, 70]
              },
              outOfRange: {
                symbolSize: [10, 70],
                color: ['rgba(255,255,255,.2)']
              },
              controller: {
                inRange: {
                  color: ['#808080']
                },
              },
              textStyle:{
                color: '#f1f1f1'
              }
            },
            {
              left: 'right',
              bottom: '5%',
              dimension: 2,
              min: 0,
              max: 10,
              itemHeight: 120,
              calculable: true,
              precision: 0.1,
              text: ['明暗：故障设备'],
              textGap: 30,

              inRange: {
                colorLightness: [1, 0.5]
              },
              outOfRange: {
                color: ['rgba(255,255,255,.2)']
              },
              controller: {
                inRange: {
                  color: ['#000']
                },
                outOfRange: {
                  color: ['#444']
                }
              },
              textStyle:{
                color: '#f1f1f1'
              }
            }
          ],
          series: [
            {
              name: '东郊水厂',
              type: 'scatter',
              itemStyle: itemStyle,
              data: dataDJSC
            },
            {
              name: '北郊水厂',
              type: 'scatter',
              itemStyle: itemStyle,
              data: dataBJSC
            },
            {  name: '管网部',
              type: 'scatter',
              itemStyle: itemStyle,
              data: dataGWB
            },
            {  name: '营销部',
              type: 'scatter',
              itemStyle: itemStyle,
              data: dataYXB
            }

          ]
        };
        this.chart = echarts.init(this.$el, 'wg')
        th.chart.setOption(option)
      }
    }
  }
</script>
<style scoped>
  .echarts-inner {
    height: 100%;
  }

</style>
